<%--
  Created by IntelliJ IDEA.
  User: hz
  Date: 2024/7/23
  Time: 10:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人设置中心</title>
  <!-- 引入 layui.css -->
  <link rel="stylesheet" href="/layui-v2.9.0/layui/css/layui.css" media="all">
  <script src="/layui-v2.9.0/layui/layui.js"></script>

  <script src="/js/city-picker/city-picker.data.js"></script>
  <link rel="stylesheet" type="text/css" href="/js/city-picker/city-picker.css">

  <style>
    #header{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
    }
    #sidebar{
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 50px; /* 留出头部导航的高度 */
      bottom: 0;
      left: 0;
      width: 200px;
      height: 100%;
      padding: 10px;
      margin-top: 30px;
    }
    #content {

      margin-top: 100px;
      width:51%;
      border: 1px solid gold;

    }
    #userHead{
      border-radius: 50%!important;
      overflow: hidden;
      width: 15%;
      height: 15%;
    }
    .container {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      z-index: 10;
      border: none;
      /*padding: 10px;*/

    }
    .layui-nav *{
      font-size: 20px;
    }
    .layui-nav-tree.layui-nav-side{
      position: relative;
      margin-top: 10px;
    }
    select{
    !important;

    }
  </style>

</head>
<body>
<!--水平导航-->
<div id="header" class="layui-form layui-col-xs12 layui-bg-gray">
  <div class="container layui-header">
    <ul class="layui-nav layui-layout-left  layui-bg-gray" >
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-hide-xs">
        <img style="width: 40px;height: 40px; padding: 10px" src="/img/热趣部落.png" alt="图片">
      </li>
      <li class="layui-nav-item layui-hide-xs">
        <input type="text" placeholder="" class="layui-input">
        <div class="layui-input-split" style="cursor: pointer;">
          <i class="layui-icon layui-icon-search"></i>
        </div>

      </li>
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      <li class="layui-nav-item "><a href="/forward/indexPage">首页</a></li>
      <li class="layui-nav-item "><a href="/forward/forwardUserIndexPage">个人中心</a></li>
      <li class="layui-nav-item "><a href="/forward/forwardUserSettingPage">账号设置</a></li>
      </li>
    </ul>
  </div>
</div>
<!--垂直导航-->
<div id="sidebar" class="layui-col-xs3 layui-col-xs-offset1">
  <ul  class="layui-nav layui-nav-tree layui-nav-side layui-bg-gray">
        <span class="layui-nav-item" style="padding-left: 10px">
             <h3>设置</h3>
        </span>
    <li class="layui-nav-item">
      <a  href="/forward/forwardUserSettingPage">
        <i class="layui-icon layui-icon-home">  编辑资料</i>
      </a>
    </li>
    <li class="layui-nav-item">
      <a>
        <i class="layui-icon layui-icon-user">  账号安全</i>
      </a>
      <dl class="layui-nav-child">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-email"></i>
          </div>
          <dd style="margin-left: 10px"><a href="/forward/forwardUserEmailPage">更改邮箱</a></dd>
        </div>
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-password"></i>
          </div>
          <dd style="margin-left: 10px"><a href="/forward/forwardUserPasswordPage">更改密码</a></dd>
        </div>
      </dl>
    </li>
    <li class="layui-nav-item">
      <a href="/forward/forwardUserAccusionPage"> <i class="layui-icon layui-icon-friends">   账号投诉</i></a>
    </li>
  </ul>
</div>

<!--用户信息-->
<form class="layui-form" action="">
  <div id="content" class="layui-col-xs-offset3">
    <div class="layui-btn-container" style="display: flex; justify-content: center; align-items: center;">
      <img id="userHead" class="layui-upload-" src="${sessionScope.user.upictureurl}" alt=""><br>
    </div>
    <div style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
      <p>${sessionScope.user.uname}</p><br>
      <span>个性签名</span>
    </div>
    <!--    个人资料-->
    <!--    邮箱-->
    <div class="layui-form-item" style="margin-top: 20px">
      <div class="">
        <label class="layui-form-label">用户名称</label>
        <div class="layui-input-inline">
          <div class="layui-input-inline layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-username" ></i>
            </div>
            <input type="text" name="name" id="name" value="${sessionScope.user.uname}" lay- placeholder="" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
    </div>
    <div class="layui-form-item" >
      <lable class="layui-form-label" >个人邮箱</lable>
      <div class="layui-input-inline layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-email"></i>
        </div>
        <input type="text" name="email" id="email" value="${sessionScope.user.uemail}" readonly class="layui-input" placeholder="用户邮箱">
      </div>
      <div class="layui-form-mid layui-text-em">
        不可于此处修改
      </div>
    </div>
    <hr>
    <h3>个人基本资料</h3>
    <div class="layui-form-item" style="margin-top: 20px">
      <label class="layui-form-label">性别</label>
      <div class="layui-input-block">
        <input type="radio" name="sex" value="男" title="男" id="man" >
        <input type="radio" name="sex" value="女" title="女" id="woman">
      </div>
    </div>
    <div class="layui-form-item" style="margin-top: 20px">
      <label class="layui-form-label">生日</label>
      <div class="layui-input-inline layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-date"></i>
        </div>
        <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item" style="margin-top: 20px">
      <label class="layui-form-label">地址</label>
      <div id="" class="layui-input-block">
        <input type="text" class="layui-input" id="address" value="${sessionScope.user.uaddress}" name="city-picker" readonly="readonly" data-toggle="city-picker" placeholder="请选择">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">职业</label>
      <div class="layui-input-inline">
        <div class="layui-input-prefix">
        </div>
        <input type="text" name="occupation" id="occupation" value="${sessionScope.user.uoccupation}" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button id="btn"  name="btn" lay-submit="" lay-filter="btn" class="layui-btn">修改</button>
      </div>
    </div>
  </div>
</form>

<script type="text/javascript">
  layui.extend({
    citypicker:'{/}../js/city-picker/city-picker'
  }).use(['jquery','citypicker','form'],function(){
    var $ = layui.$,
            form = layui.form,
            citypicker = layui.citypicker;

    var cityPicker = new citypicker("#address",{
      provincename:"provinceId",
      cityname:"cityId",
      districtname: "districtId",
      level: 'districtId',// 级别
    })
  });

  layui.use(function (){
    var $ = layui.$;
    var form = layui.form;
    var layer = layui.layer;
    var laydate = layui.laydate;
    var util = layui.util;
    laydate.render({
      elem: '#date',
      value:'${sessionScope.user.ubirthday}'
    });


    form.on('submit(btn)', function (data) {
      $.ajax({
        url:'/user/updateUserInfo',
        data: data.field,
        type: 'post',
        success: function (data) {
          layer.msg('修改成功', {icon: 1});
        },
        error: function (data) {
          layer.msg('修改失败', {icon: 1});
        }
      });
      return false;
    });
    if('${sessionScope.user.usex}'==='' ){
      document.getElementById('man').checked = false;
      document.getElementById('woman').checked = false;
    } else if('${sessionScope.user.usex}'==='男' ){
      document.getElementById('man').checked = true;
    } else {
      document.getElementById('woman').checked = true;
    }
    form.render();
  })
</script>
</body>
</html>

